<template>
	<view class="content" >
		<!-- <view class="mask" v-if="showMask" ></view> -->
		<IndexHead :config="navConfig"/>
		<!-- <view :style="{height:statusBarHeight}" class="uni-status-bar"></view> -->
		<!-- 选项卡头部 -->
		<view class="glmoreTabBox" >
			<view class="glmoreTab">
				<view
					v-for="(tab,index) in tabBars"
					:key="tab.id"
					:class="tabIndex==index ? 'active' : ''"
					@click="tapTab(index)">
					{{tab.name}}
				</view>
			</view>	
		</view>
		<!-- 选项卡内容 -->
		<swiper
			:current="tabIndex"
			duration="300"
			class="swiper-box"
			circular='true'
			@change="changeTab"
			>
			 <swiper-item class="tab-content" v-for="(order,index) in orderList" :key="index">
				<scroll-view scroll-y class="scrollHeight">
					<view v-for="(tabList,index1) in order.tabLists" :key="index1"  class="pic1All">
						<view class="payStatus" >
							<view>
								<image class="right-more" src="/static/myPic/right-dian.png" mode="" @click="showMore(index1)"></image>
							</view>
							<view v-if="delBtnIndex == index1" class="delete-btn" @click="delete1()">
								<view class="sanjiao"></view>
								<text>删除订单</text>
							</view>
						</view>
						<view class="single"  @click="toDetail(tabList.state)">
							<view class="item-head">
								<text>{{tabList.title}}</text>
								<view class="you">{{tabList.you}}</view>
							</view>
							<view class="pic1"><image :src="tabList.img"></image></view>
							<view class="pic1Text">
								<text class="pic1Text-title">{{tabList.name}}</text>
								<text class="pic1Text-type">{{tabList.time}}{{tabList.type}}</text>
								<text class="heji">合计： <text style="font-size: 30upx;color: rgba(221,84,10,1.00);">￥{{tabList.price}}</text></text>
								<view class="item-btns">
									<view v-if="tabList.state == 4 " class="item-btn-2">评价</view>
									<view v-if="tabList.state == 1 " class="item-btn-2">付款</view>
									<view v-if="tabList.state == 3" class="item-btn-2">确认收货</view>
									<view v-if="tabList.state == 5 "  class="item-btn-3">待退款</view>
									<view  v-if="tabList.state == 1 || (tabList.state == 2 && tabList.you=='卖家未发货')" class="item-btn-1">取消订单</view>
									<view  v-if="tabList.state != 1 && tabList.state != 5 && (tabList.state == 2 && tabList.you!='卖家未发货')" class="item-btn-1 ">查看物流</view>
								</view>
							</view>
						</view>
						
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				navConfig:{
					backgroundColor: 'transparent',
					statusBarHeight:global.statusBarHeight + 'px',
					color: '#fff',
					common:{
						hasSearch:false,
						hasMenu:false,
						hasTitle:true,
						// minHead:true,
						headHeight:200,
						fixBg:false
					},
					left: {
						img:'',
						text:'',
					},
					mid:{
						title:'全部订单',
						hasSearchMid:false
					},
					right:{
						
					}
				},
				delBtnIndex:null,
				showMask:false,
				curTabIndex: 0,
				tabIndex: 0 ,//默认选中第一个tab
				tabBars:[
					{name:'全部订单'},
					{name:'待付款'},
					{name:'待发货'},
					{name:'待收货'},
					{name:'待评价'},
					{name:'待退款'}
				],
				orderList:[
					{
						state:0,
						tabLists:[
							{
								title:'迪士尼梦幻世界',
								you:'交易成功',
								img:'/static/myPic/order.jpg',
								name:'发箍达菲熊雪莉玫史黛拉兔耳朵游玩可爱头饰',
								time:'浅蓝色官方旗舰店；',
								type:'L码；',
								price:168,
								state:3
								// orderStatus:'查看物流',
								// payStatus:'评 价',
							},
							{
								title:'迪士尼梦幻世界',
								you:'卖家已发货',
								img:'/static/glBan.png',
								name:'发箍达菲熊雪莉玫史黛拉兔耳朵游玩可爱头饰',
								time:'浅蓝色官方旗舰店；',
								type:'L码；',
								price:168,
								state:2
								// orderStatus:'查看物流',
								// payStatus:'确认收货'
							},
							{
								title:'迪士尼梦幻世界',
								you:'卖家未发货',
								img:'/static/myPic/order.jpg',
								name:'发箍达菲熊雪莉玫史黛拉兔耳朵游玩可爱头饰',
								time:'浅蓝色官方旗舰店；',
								type:'L码；',
								price:98,
								state:3
								// orderStatus:'取消订单'
							}
						]
					},
					{
						state:1,
						tabLists:[
							{	
								title:'迪士尼梦幻世界',
								img:'/static/glBan.png',
								name:'发箍达菲熊雪莉玫史黛拉兔耳朵游玩可爱头饰',
								time:'浅蓝色官方旗舰店；',
								type:'L码；',
								price:168,
								state:1,
								// orderStatus:'取消订单',
								// payStatus:'立即支付'
							}
						]
					},
					{
						state:2,
						tabLists:[
							{	
								title:'迪士尼梦幻世界',
								you:'卖家未发货',
								img:'/static/myPic/order.jpg',
								name:'发箍达菲熊雪莉玫史黛拉兔耳朵游玩可爱头饰',
								time:'浅蓝色官方旗舰店；',
								type:'L码；',
								price:98,
								state:2,
								// orderStatus:'',
								// payStatus:'申请退款'
							},
							{	
								title:'迪士尼梦幻世界',
								you:'卖家未发货',
								img:'/static/myPic/order.jpg',
								name:'发箍达菲熊雪莉玫史黛拉兔耳朵游玩可爱头饰',
								time:'浅蓝色官方旗舰店；',
								type:'L码；',
								price:98,
								state:2,
								// orderStatus:'',
								// payStatus:'申请退款'
							}
						]
					},
					{
						state:3,
						tabLists:[
							{	
								title:'迪士尼梦幻世界',
								you:'卖家已发货',
								img:'/static/myPic/order.jpg',
								name:'发箍达菲熊雪莉玫史黛拉兔耳朵游玩可爱头饰',
								time:'浅蓝色官方旗舰店；',
								type:'L码；',
								price:98,
								state:3,
								// orderStatus:'',
								// payStatus:'申请退款'
							},
							{	
								title:'迪士尼梦幻世界',
								you:'卖家已发货',
								img:'/static/myPic/order.jpg',
								name:'发箍达菲熊雪莉玫史黛拉兔耳朵游玩可爱头饰',
								time:'浅蓝色官方旗舰店；',
								type:'L码；',
								price:98,
								state:3,
								// orderStatus:'',
								// payStatus:'申请退款'
							}
						]
					},
					{
						state:4,
						tabLists:[
							{
								title:'迪士尼梦幻世界',
								you:'交易成功',
								img:'/static/myPic/order.jpg',
								name:'发箍达菲熊雪莉玫史黛拉兔耳朵游玩可爱头饰',
								time:'浅蓝色官方旗舰店；',
								type:'L码；',
								price:98,
								state:4,
								// orderStatus:'评价',
								// payStatus:'申请发票'
							}
						]
					},
					{
						state:5,
						tabLists:[
							{
								title:'迪士尼梦幻世界',
								you:'交易失败',
								img:'/static/myPic/order.jpg',
								name:'发箍达菲熊雪莉玫史黛拉兔耳朵游玩可爱头饰',
								time:'浅蓝色官方旗舰店；',
								type:'L码；',
								price:98,
								state:5,
								// orderStatus:'',
								// payStatus:'退款已申请，等待卖家处理'
							},
							{
								title:'迪士尼梦幻世界',
								you:'交易失败',
								img:'/static/myPic/order.jpg',
								name:'发箍达菲熊雪莉玫史黛拉兔耳朵游玩可爱头饰',
								time:'浅蓝色官方旗舰店；',
								type:'L码；',
								price:98,
								state:5,
								// orderStatus:'',
								// payStatus:'退款已申请，等待卖家处理'
							}
						]
					}
				]
			}
		},
		computed:{
			
		},
		methods:{
			tapTab(index){
				this.tabIndex = index;
				this.delBtnIndex = null
				console.log('tapTab:'+this.tabIndex);
			},
			//swiper 切换
			changeTab(e){
				this.tabIndex = e.target.current;
			},
			payStatusBtn(index){
				// console.log(index);
				// 跳到申请电子发票
				if(index == 3){
					uni.navigateTo({
						url:'/pages/my/myOrder/myNotEvaluation/invoiceDZ/dianZi'
					})
				}
			},
			// 去对应的订单详情
			goOrderDetails(index){
				// console.log(index);
				uni.navigateTo({
					url:'/pages/my/myOrder/orderDetails?orderDetails='+index
				})
			},
			showMore(index){
				console.log(111);
				this.delBtnIndex == index ? this.delBtnIndex = null : this.delBtnIndex = index
				if(this.delBtnIndex == null){
					this.showMask = false
				}else{
					this.showMask  = true
				}
			},
			clear(){
				this.delBtnIndex = null
				this.showMask = false
			},
			delete1(event){
                    var btn = document.querySelector(".delete-btn");
                    if(btn){
                        if(!btn.contains(event.target)){            //按钮.app-download以外的区域
                            console.log(11111)
                        }
                    }
             },
			 toDetail(state){
				 uni.navigateTo({
				 	url:this.urlSwitch(state)
				 })
			 },
			 urlSwitch(state){
				 switch (state){
				 	case 0:
				 		return 'orderDetail'
				 		break;
				 	case 1:
						return 'noPayDetail'
				 		break;
				 	case 2:
						return 'orderDetail'
				 		break;
				 	case 3:
						return 'orderDetail'
				 		break;
				 	case 4:
						return 'orderDetail'
				 		break;
				 	default:
						return 'orderDetail'
				 		break;
				 }
			 }
		},
		onLoad(options){
			console.log(options);
			this.tabIndex = options.state
		}
	}
</script>

<style>
	.mask{
		width: 750upx;
		height: 100vh;
		position: fixed;
		z-index: 15;
	}
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	/* 订单支付状态样式 */
	.orderTipStyle1{
		color: #666666;
		border:1upx solid #999999;
	}
	.orderTipStyle2{
		
	}
	.orderTipStyle3{
		color: #666666;
		border:1upx solid #999999
	}
	
	.payStatusStyle1{
		color:#FE990A;
		border:1upx solid #FF6C00;
	}
	.payStatusStyle2{
		color:#DC3509;
		border:1upx solid #DC3509;
	}
	.payStatusStyle3{
		color:#666666;
		border:1upx solid #999999;
	}
	.payStatusStyle4{
		color:#999999;
	}
	page, .content{
		height:100%;
	}
	.scrollHeight{
		height: 100%;
	}
	.swiper-box{
		height: calc(100% - 130px);
	}
	.single{
		/* margin-top: 35upx; */
		width: 100%;
		height: auto;
		display: table;
	}
	.item-head{
		width: 100%;
		height: 50upx;
	}
	.item-head text:nth-child(1){
		font-size: 30upx;
		font-weight: bold;
		float: left;
	}
	.item-head .you{
		font-size: 24upx;
		float: right;
		color: rgba(221,84,10,1.00);
	}
	.pic1All{
		width: 675upx;
		height: auto;
		padding-left: 39upx;
		padding-right: 36upx;
		display: table;
		position: relative;
		margin-bottom: 40upx;
		padding-bottom: 40upx;
		border-bottom: rgba(238,238,238,1.00) solid 16upx;
	}
	.pic1All > view{
		/* display: flex;
		flex-direction: row;
		align-items: center; */
	}
	.pic1 {
		float: left;
	}
	.pic1 image{
		width: 220upx;
		height: 206upx;
		border-radius: 15upx;
		margin-top: 45upx;
		
	}
	.pic1Text{
		float: right;
		width: 430upx;
		margin-top:46upx;
		display: flex;
		flex-direction: column;
	}
	.pic1Text-title{
		margin-top: 1vw;
		width: 363upx;
		display: block;
		opacity: 1;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: rgba(39,34,34,1);
	}
	.pic1Text-type{        
		font-size: 20upx;
		color: #999999;
		font-weight: normal;
		margin-top: 10upx;
	}
	.pic1Text h6{
		margin-top:16upx;
		font-size: 22upx;
		color: #FEB540;
	}
	.heji{
		font-size: 24upx;
		text-align: right;
		line-height: 30upx;
		margin-right: 10upx;
		margin-top: 10upx;
		color: rgba(102,102,102,1.00);
	}
	.payStatus{
		width:100upx;
		height: 60upx;
		line-height: 60upx;
		bottom: 20upx;
		z-index: 25;
		position: absolute;
	}
	
	/* 头部选项卡 */
	.glmoreTabBox{
		/* margin-top: 50upx; */
		position: relative;
	}
	.glmoreTab{
		width:100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top:-82upx;
		margin-bottom: 40upx;
	}
	.glmoreTab > view{
		flex: 1;
		text-align: center;
		font-size: 28upx;
		color: #0075EE;
		line-height: 54upx;
		position: relative;
	}
	.glmoreTab .active{
		font-weight: bold;
	}
	.glmoreTab .active:before{
		content:"";
		width:102upx;
		height: 3upx;
		background:linear-gradient(left,#8EC6FF,#6592F7);
		display:block;
		margin: auto;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -51upx;
	}
	.right-more{
		width: 50upx;
		margin-top: 10upx;
		z-index: 22 !important;
		position: absolute;
		height: 50upx;
	}
	.delete-btn{
		width: 180upx;
		background: #FFFFFF;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
		font-size: 24upx;
		z-index: 21;
		position: absolute;
		top: 58upx;
		box-shadow: 0px 0px 43px 0px rgba(113,113,114,0.26);
	}
	.sanjiao{
		width: 0upx;
		height: 0upx;
		float: right;
		margin-right: 25%;
		border: 10upx solid transparent;
		border-bottom-color: #FFFFFF;
		top:-20upx;
		margin-left: 5%;
		position: absolute;
	}
	.item-btns{
		width: 100%;
		height: 52upx;
		margin-top: 40upx;
	}
	.item-btn-2{
		width: 134upx;
		height: 52upx;
		border: rgba(255,108,0,1.00) solid 1upx;
		border-radius: 30upx;
		line-height: 52upx;
		text-align: center;
		font-size: 24upx;
		color: rgba(255,108,0,1.00);
		float: right;
		margin-left: 26upx;
	}
	.item-btn-3{
		width: 134upx;
		height: 52upx;
		border-radius: 30upx;
		line-height: 52upx;
		text-align: center;
		font-size: 24upx;
		color: rgba(249,62,62,1.00);
		float: right;
		margin-left: 26upx;
	}
	.item-btn-1{
		width: 134upx;
		height: 52upx;
		border:rgba(153,153,153,1.00) solid 1upx;
		border-radius: 30upx;
		line-height: 52upx;
		text-align: center;
		font-size: 24upx;
		color: rgba(153,153,153,1.00);
		float: right;
		margin-left: 26upx;
	}
</style>
